<template>
  <view class="quality-recommend" :style="viewColor">
	 <view class="quality_header">
		<view class="slider-banner swiper">
			<view class="swiper">
				<swiper indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration"
				 indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item>
							<image :src="item.pic" class="slide-image" @click="goUrl(item.url)"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	 </view>
    <view class="recommend_count">
		<view class="title acea-row">
		  <view class="name"> {{ name }}</view>
		  <text>{{ desc }}</text>
		</view>
		<view class="recommend_goods">
			<block v-for="(item,index) in recommendList" :key="index" v-if="index < 3">
				<view class="list"  @click="goDetail(item)">
					<view class="picture">
						<image :src="item.image"></image>
					</view>
					<view class="name line1">{{item.store_name}}</view>
				</view>
			</block>
		</view>
	</view>
	<view class="wrapper">
		<GoodList :bastList="goodsList" :is-sort="false" :isLogin='isLogin'></GoodList>
		<view class="txt-bar" v-if="goodsList.length>0 && !isScroll">我是有底线的~</view>
	</view>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import emptyPage from '@/components/emptyPage.vue'
import GoodList from "../components/goodList";
import { getIndexData } from '@/api/api.js';
import { getGroomList,getHotBanner } from "@/api/store";
import { goShopDetail } from '@/libs/order.js'
import {initiateAssistApi} from '@/api/activity.js';
import util from "@/utils/util";
import { mapGetters } from "vuex";
import { toLogin } from '@/libs/login.js';

const typeData = {
	best:{
		desc:'新品抢先购',
		name:'精品推荐'
	},
	hot:{
		desc:'剁手必备指南',
		name:'热门榜单'
	},
	new:{
		desc:'发现品质好物',
		name:'首发新品'
	},
	good:{
		desc:'惊喜折扣价',
		name:'推荐单品'
	},
}

export default {
  computed: mapGetters(['isLogin','uid','viewColor']),
  name: "HotNewGoods",
  components: {
    GoodList,
		emptyPage,
  },
  props: {},
  data: function() {
    return {
      imgUrls: [],
      goodsList: [],
			recommendList: [],
      name: "",
			hotData:[],
			loaded:false,
      desc: "",
			type:0,
			autoplay:true,
			circular:false,
			interval: 3000,
			duration: 500,
			page:1,
			limit:8,
			isScroll:true,
    };
  },
  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function() {
	  let that = this;
  	wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
  	return {
  		title: that.name || '',
  		path: 'pages/columnGoods/HotNewGoods/index?type='+that.type,
  	}
  },
  onShareTimeline: function() {
	  let that = this;
	  return {
  		title:  that.name || '',
  		  query: {
  		    type: that.type
  		  },
  		  imageUrl: ''
  		}
  },
  // #endif
  onLoad: function(option) {
		this.type = option.type
		this.getIndexGroomList();
		this.getHotBanner();
		getIndexData().then(res=>{
			this.hotData = res.data.hot;
		}).finally(e=>{
			this.loaded = true;
			this.titleInfo();
		});
  },
  watch:{
		name(n){
			uni.setNavigationBarTitle({
				title:n||'加载中'
			})
		}
  },
  methods: {
		goUrl(url){
			this.$util.JumpPath(url);	
		},
    titleInfo: function() {
      if(!this.loaded){
      	this.name = '';
      	this.desc = '';
      }else{
      	let name = (typeData[this.type]||{}).name || '精品推荐';
				let url = this.$route ? this.$route.fullPath : ('/' + util.getNowUrl());
      	this.hotData.forEach(data=>{
      		if(data.url == url) name = data.title;
      	})
      	this.name = name;
      	this.desc = (typeData[this.type]||{}).desc || '新品抢先购';
      }
    },
    getIndexGroomList: function() {
			if(!this.isScroll) return
				let that = this;
				let type = this.type;
				getGroomList(type,{
					page:this.page,
					limit:this.limit
				}).then(res => {
					that.goodsList = that.goodsList.concat(res.data.list);
				if(this.page == 1)that.recommendList = that.goodsList.splice(0,3);
					that.isScroll = res.data.list.length>=that.limit
					that.page++
					})
					.catch(function(res) {
						that.$util.Tips({ title: res });
					});
			},
		getHotBanner(){
			let that = this
			getHotBanner(this.type).then(res=>{
				that.imgUrls = res.data;
			})
		},
		goDetail(item){
			goShopDetail(item, this.uid).then(res => {
				if (this.isLogin) {
					initiateAssistApi(item.activity_id).then(res => {
						let id = res.data.product_assist_set_id;
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/activity/assist_detail/index?id=' + id
						});
					}).catch((err) => {
						uni.showToast({
							title: err,
							icon: 'none'
						})
					});
				} else {
					toLogin()
				}
			})
		}
  },
	onReachBottom() {
		this.getIndexGroomList()
	}
};
</script>
<style lang="scss">
	/deep/ .empty-box{
		background-color: #f5f5f5;
	}
	.quality_header{
		position: relative;
		padding: 30rpx 20rpx 0;
		&::before{
			content: "";
			display: block;
			width: 100%;
			height: 180rpx;
			background: var(--view-theme);
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 0 0 20rpx 20rpx;
			z-index: 0;
		}
	}

	.swiper,swiper,swiper-item,.slide-image{
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx;
		z-index: 20;
	}
	/deep/.swiper .uni-swiper-dot{
		width: 8rpx;
		height: 8rpx;
		border-radius: 100%;
		background-color: rgba(0,0,0,.3)!important;
	}
	/deep/.swiper .uni-swiper-dot-active{
		width: 18rpx;
		background-color: #E93323!important;
		border-radius: 4rpx;
		margin-top: -4rpx;
	}
	.quality-recommend {
		background: #F5F5F5;
	}
	.recommend_goods{
		padding: 30rpx 0;
		display: flex;

		.list{
			width: 210rpx;
			margin-right: 20rpx;
			&:last-child{
				margin-right: 0;
			}
			.picture,image{
				width:210rpx;
				height: 210rpx;
				border-radius: 16rpx;
			}
			.name{
				font-size: 26rpx;
				margin-top: 14rpx;
				padding: 0 4rpx;
			}
		}
	}
	.recommend_count{
		min-height: 416rpx;
		background-size: 100%;
		background-color: #fff;
		background-repeat: no-repeat;
		margin: 20rpx auto 0;
		width: 710rpx;
		padding: 0 20rpx;
		border-radius: 24rpx;
		background-image: url('');
		.title {
			padding: 20rpx 0;
			align-items: flex-end;
			.name{
				font-size:32rpx;
				color: #282828;
				font-weight: bold;
				margin-right: 20rpx;
			}
			text{
				font-size: 24rpx;
				color: #666666;
			}


		}
	}
	.wrapper{
		margin-top: 20rpx;
		padding: 0 20rpx;
	}
	.txt-bar{
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #666;
		background-color: #f5f5f5;
	}
</style>
